/**
 * Created by xmgong on 2017/12/13.
 * 规格编辑
 */
import React from 'react';
import {connect} from 'react-redux';
import {View, FlatList, Text, TextInput, TouchableOpacity, Dimensions} from 'react-native';
import {naviPush, naviBack} from '../../navigatorApp/actions'
import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import CheckBox from 'react-native-checkbox';
import themeconfig from '../../config/theme';
import {setProperty, refreshProperty} from './actions';
import {ArrayUtil} from '../../utils/common';
import styles from './styles';
import CLTagView from '../../component/CLTagView';
import {GetValuesByDicId} from '../../utils/NativeUtil';
let {width, height} = Dimensions.get('window');
let flatWidth = ( width - 60) / 4;


class StandardsEdit extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title={navigation.state.params.property.attrName}/>
    });

    constructor(props) {
        super(props);
        this.state = {
            itemValues: [],
            showValues: [],
            extValue: ''
        };
        this.propertyItem = props.navigation.state.params.property;
    }

    componentDidMount() {
        let dicid = this.propertyItem.dicId;
        let self = this;
        if (dicid == undefined || dicid.length == 0 || dicid == null || dicid == 0) {
        } else {
            GetValuesByDicId(dicid, function (res) {
                if (res != undefined && res.length > 0) {
                    self.setState({
                        itemValues: res
                    })
                }
            });
        }
        let tempshow = this.propertyItem.attrValue.split(";");
        let values = [];
        tempshow.map((item) => {
            values.push({
                itemValue: item,
                dicId: dicid,
                id: 0,
                sortNo: 0
            });
        });
        this.setState({
            showValues: values
        });
    }

    changeSelected = (item, checked) => {
        if (!checked) {
            //添加到下面
            this.addItem(item);
        } else {
            //移除掉下面的数据
            this.delItem(item);
        }
    };

    _renderItemValues = ({item}) => {
        return (
            <View style={{
                flexDirection: 'row',
                width: (width - 20) / 4,
                paddingHorizontal: 10,
                paddingVertical: 5,
                alignItems: 'center'
            }}>
                <CheckBox
                    label={item.itemValue}
                    labelStyle={{color: 'black'}}
                    checkboxStyle={{width: 18, height: 18}}
                    onChange={(checked) => this.changeSelected(item, checked)}
                    containerStyle={{marginRight: 8, marginTop: 5}}
                    checkedImage={require('../../image/img_checked.png')}
                    uncheckedImage={require('../../image/img_check_no.png')}
                />
                {/* <Text>{item.itemValue}</Text> */}
            </View>)
    };


    delItem = (item) => {
        let show = this.state.showValues;
        let newshow = [];
        show.map((it) => {
            if (it != item) {
                newshow.push(it);
            }
        });
        this.setState({
            showValues: newshow
        });
    };


    addItem = (item) => {
        let show = this.state.showValues;
        let newshow = show.concat(item);
        this.setState({showValues: newshow, extValue: ''});
    };

    saveAction = () => {
        let attrValues = [];
        let list = this.state.showValues;
        if (list.length > 0) {
            list.map((item) => {
                if (item != undefined && item.itemValue.length > 0) {
                    attrValues.push(item.itemValue)
                }
            });
        }

        let item = this.propertyItem;
        item.attrValue = attrValues.join(";");
        this.props.setProperty(item);
        this.props.refreshProperty();
        this.props.naviBack();
    };

    render() {
        let itemshowViews = [];
        this.state.showValues.map((item) => {
            if (item == undefined || item.itemValue == "") {

            } else {
                itemshowViews.push(<TouchableOpacity
                    onPress={() => this.delItem(item)}>
                    <CLTagView
                        customStyle={{
                            margin: 5,
                            borderColor: themeconfig.maincolor
                        }}
                        title={item.itemValue}
                        textStyle={{
                            fontSize: 14,
                            color: themeconfig.maincolor
                        }}/>
                </TouchableOpacity>)
            }
        });


        return (<View style={{flexDirection: 'column', backgroundColor: 'white'}}>
            <FlatList
                horizontal={false}
                data={this.state.itemValues}
                numColumns={4}
                renderItem={this._renderItemValues}
            />

            <View style={{
                marginLeft: 10,
                marginTop: 5,
                height: 42,
                marginBottom: 5,
                marginRight: 10,
                borderWidth: 1,
                borderColor: '#eee',
                borderRadius: 2,
                flexDirection: 'row',
                paddingLeft: 10,
                alignItems: 'center',
                paddingRight: 10
            }}>

                <TextInput
                    underlineColorAndroid='transparent'
                    onChangeText={(txt) => this.setState({extValue: txt})}
                    value={this.state.extValue}
                    style={{
                        flex: 1,
                    }}/>

                <TouchableOpacity onPress={() => this.addItem({itemValue: this.state.extValue})}>
                    <View style={{
                        paddingLeft: 10,
                        paddingBottom: 2,
                        paddingTop: 2,
                        paddingRight: 10,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderColor: themeconfig.maincolor,
                        borderRadius: 2,
                        borderWidth: 1,
                        marginTop: 5,
                        marginBottom: 5,
                        marginLeft: 10,
                    }}>
                        <Text style={{color: themeconfig.maincolor}}>确定</Text>
                    </View>
                </TouchableOpacity>

            </View>

            <View style={styles.tagcontainer}>
                {itemshowViews}
            </View>

            <TouchableOpacity onPress={() => this.saveAction()}>
                <View style={{
                    marginTop: 20,
                    marginLeft: 20,
                    marginRight: 20,
                    marginBottom: 20,
                    paddingTop: 10,
                    paddingBottom: 10,
                    borderRadius: 3,
                    backgroundColor: themeconfig.maincolor,
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    <Text style={{color: 'white', fontSize: 15}}>保存</Text>
                </View></TouchableOpacity>

        </View>);
    }
}

const mapStateToProps = (state) => {
    return {
        token: state.mainmodel.token,
    }
};


const mapDispatchToProps = (dispatch) => {
    return {
        naviPush: (routerName, params) => {
            dispatch(naviPush(routerName, params));
        },
        naviBack: () => {
            dispatch(naviBack());
        },
        setProperty: (item) => {
            dispatch(setProperty(item));
        },
        refreshProperty: () => {
            dispatch(refreshProperty());
        }
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(StandardsEdit);
